{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h2>用户标签管理</h2>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" style="background-color: #1976D2; border-color: #1976D2" data-bs-toggle="modal" data-bs-target="#addTagModal">
                <i class="mdi mdi-plus"></i> 添加标签
            </button>
        </div>
    </div>

    <div class="row">
        <!-- 标签类别列表 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">标签类别</h5>
                </div>
                <div class="card-body">
                    <div class="list-group" id="tagCategories">
                        <a href="#" class="list-group-item list-group-item-action active" style="background-color: #1976D2; border-color: #1976D2" data-category="all">
                            全部标签
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-category="consumption">
                            消费能力
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-category="behavior">
                            行为特征
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-category="preference">
                            偏好特征
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-category="demographic">
                            人口属性
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 标签列表 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                    <!-- 搜索和筛选 -->
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="mb-3 d-flex align-items-center">
                                <div class="form-group me-2 flex-grow-1">
                                    <label class="form-label" for="tagSearch">搜索标签</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="tagSearch" name="tagSearch" placeholder="搜索标签..." aria-label="搜索标签">
                                        <button class="btn btn-outline-primary" id="searchBtn" aria-label="搜索">
                                            <i class="mdi mdi-magnify" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <select class="form-select" id="tagSort">
                                <option value="name">按名称排序</option>
                                <option value="usage">按使用次数排序</option>
                                <option value="created">按创建时间排序</option>
                            </select>
                        </div>
                    </div>

                    <!-- 标签列表 -->
                    <div id="tagList"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加标签模态框 -->
<div class="modal fade" id="addTagModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加标签</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addTagForm">
                    <div class="mb-3">
                        <label class="form-label">标签名称</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">标签类别</label>
                        <select class="form-select" name="category" required>
                            <option value="consumption">消费能力</option>
                            <option value="behavior">行为特征</option>
                            <option value="preference">偏好特征</option>
                            <option value="demographic">人口属性</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">描述</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" style="background-color: #1976D2; border-color: #1976D2" id="saveTagBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 用户列表模态框 -->
<div class="modal fade" id="viewUsersModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">标签用户列表</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>会员等级</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="tagUsersList">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/user_tags.js') }}"></script>
{% endblock %}
